iOS Style Settings Screen
Description
Example showing how to create a settings screen using the iOS style.
The iOS Settings screen example is loaded by clicking the Load Sample ViewBox link on the Home tab of the ViewBox Builder.
The entire contents of the settings screen (i.e. each of the properties prompted for and the type of editor used for the property) is driven by the ViewBox data. For example, the settings screen in the above image is created using this data:
[
{text: 'Name', type: 'edit', editor: ['EDITORSET_1','EDITOR_1'], name: 'name', value: 'John Smith'},
{group: 'Group 1', icon: 'svgIcon=#alpha-icon-home:icon', text: 'Item 1', type: 'switch', name: 'item1', value: true},
{group: 'Group 1', icon: 'svgIcon=#alpha-icon-shield:icon', text: 'Item 2', type: 'switch', name: 'item2', value: false},
{group: 'Group 1', icon: 'svgIcon=#alpha-icon-envelopeSolid:icon', text: 'Item 3', type: 'switch', name: 'item3', value: true},
{group: 'Group 2', text: 'Notifications', type: 'disclosure', name: 'disclosure1'},
{group: 'Group 2', name: 'passFail', value: 'Pass', values: ['Pass','Retry','Fail'], type: 'radio'},
{group: 'Group 2', name: 'colors', value: ['Red','Green'], values: ['Red','Blue','Green'], type: 'checkbox'},
{text: 'Phone', type: 'edit', editor: ['EDITORSET_1','EDITOR_1'], name: 'phone',value: '123 456-7890'}
]The ViewBox 'value' is a JSON string of the setting values. The settings can be initialized by using the .setValue() method and setting the ViewBox value to a JSON string of setting values.
This sample ViewBox is a good example of how rich user interfaces can be built very easily and efficiently using a ViewBox. For example, to add a new setting to the ViewBox, simply add the definition to the ViewBox data.